<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
</head>
<style>
    .class1{
        background-color: yellow;
    }
</style>
<body>
<div id="app">
    <p>{{ message }}</p>
    <div :class="{'class1':qq}"></div>
#   v-bind:class="{'class1':qq}" 绑定事件 可以缩写为 :class="{'class1':qq}"
#   v-on:click="reverseMessage" 绑定事件 可以缩写为 :click="reverseMessage"
    <button @click="reverseMessage">反转字符串</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            qq:true,
            message: 'Runoob!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>
</body>
</html>
